<template>
    <div class="uploadBox">
      <input type="file" @change="onChange" name="files" multiple="multiple">
      <p class="seleBtn">选择文件</p>
    </div>
</template>

<script>
  import aliUtil from "../assets/aliUtil";
  export default {
    name: 'wwUpload',
    props:{
      typeName:{
        type:String
      }
    },
    data(){
      return {
        typeNameId:this.typeName,
        fileLists:[]
      }
    },
    methods:{
      onChange(e){
        let Files = e.target.files;
        let that = this;
        if(Files.length>0){
          this.$emit("uploadStateFun");
        }
        for (let i in Files){
            if (typeof Files[i] === 'object'){
              let mime = Files[i]['type'].split("/")[0];
              if(mime === "image"){
                  aliUtil.uploadThumbImg(Files[i], function (res) {
                    let upPicData = {};
                    upPicData['flag'] = 1;
                    upPicData['url'] = res[0]["url"];
                    that.$emit("reloadImg", {files:upPicData});
                  });
              }else{
                  aliUtil.uploadState=1;
                  aliUtil.init();
                  that.$nextTick(function () {
                    aliUtil.selectFile(e);
                  });
                  that.$nextTick(function () {
                    aliUtil.startUpload();
                  });
                  that.$nextTick(function () {
                   let interval = setInterval(function () {
                     if(aliUtil.uploadState===2) {
                       that.$emit("reloadImg", aliUtil.data.videoInfo);
                       clearInterval(interval);
                     }
                    }, 100);

                  });
              }
            }
        }
      }
    }
  }
</script>

<style scoped>
.uploadBox{
  width:80px;
  height:35px;
  position: relative;
}
.seleBtn{
  width:100%;
  height:100%;
  background:#409EFF;
  color:#fff;
  text-align: center;
  line-height:35px;
  border-radius:4px;
  font-size:12px;
}
input{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  opacity: 0;
  cursor: pointer;
}
.fileList{
  width:100%;
  height:100px;
}
</style>
